<template>
	<div class="classMembers">
		<div class="classIndex_h">
			<span>班级成员</span>
		</div>
		<!--  -->
		<div class="classNotice_search classNotice-op">
			<!-- 只有老师才有的操作 -->
			<div class="membersOP"  v-if='roleBaseid(6)'>
				<router-link v-if="headmaster" :to="{path: '/class/member/import', query: {id: path}}">批量导入</router-link>
				<router-link :to="{path: '/class/member/set', query: {id: path}}">岗位设置</router-link>
				<router-link :to="{path: '/class/member/add', query: {id: path}}">邀请成员</router-link>
			</div>
		</div>
		<div class="classMembers_th">
			<span v-if="headmaster">班主任：{{headmaster}}</span>
			<span v-if="telphone"> 电话：{{telphone}}</span>
			<div class="classCode" v-if='$g.user_id == classTeacher'>
				<p>班级邀请码： <i>{{classCode}}</i></p>
				<p>可通过班级邀请码快捷绑定注册</p>
			</div>
		</div>

		<div class="MemberTab">
			<template>
			  <el-tabs v-model="activeName" >
			    <el-tab-pane label="老师" name="1">
			    	<div class="classMembers_tb" >
			    		<template v-if="memberList.length !== 0">
			    			<el-table
			    			border
			    			:data="memberList"
			    			style="width: 100%">
			    				<el-table-column
			    					prop="name"
			    					label="姓名"
			    					align="center"
			    					show-overflow-tooltip>
			    				</el-table-column>
			    				<el-table-column
			    					prop="number"
			    					label="账号"
			    					align="center"
			    					show-overflow-tooltip>
			    				</el-table-column>
			    				<el-table-column
			    					prop="sex"
			    					label="性别"
			    					align="center"
			    					show-overflow-tooltip>
			    					<template slot-scope="scope">
			    						<span>{{scope.row.sex == 1 ? '男' : '女'}}</span>
			    					</template>
			    				</el-table-column>
			    				<el-table-column
			    					prop="role_name"
			    					label="角色"
			    					align="center"
			    					show-overflow-tooltip>
			    				</el-table-column>
			    				<!-- 班主任的操作 -->
			    				<el-table-column
			    				     label="操作" 
			    				     width="180px"
			    				     align="center"
			    				     class="detailsTask_lv">
			    				     <template slot-scope="scope">
			    				       <el-button type="text"  
				    				       @click="getSpace(scope.row.id)"  >
					    				   进入主页
					    				</el-button>
			    				       <el-button type="text"  @click="getOutClass(scope.row.id)"  v-if='$store.getters.userInfo.is_headmaster === 1 && roleBaseid(6)'>退出班级</el-button>
			    				     </template>
			    				</el-table-column>
			    			</el-table>
			    		</template>

			    		<div class="pageBox" v-if="total_number > page_size">
			    			<el-pagination
			    			    @current-change="change_page"
			    			    :page-size="page_size"
			    			    :current-page="page_index"
			    			    layout="prev, pager, next"
			    			    :total="total_number">
			    			  </el-pagination>
			    		</div>

			    		<div class="dependent" v-if="placeholder">
			    			<i class="ipm image_nofound"></i>
			    			<p>还没发现任何相关的内容哦~</p>
			    		</div>
			    	</div>
			    </el-tab-pane>

			    <el-tab-pane label="同学" name="2">
			    	<div class="classMembers_tb">
			    		<template v-if="memberList2.length !== 0">
			    			<el-table
			    			border
			    			:data="memberList2"
			    			style="width: 100%">
			    				<el-table-column
			    					prop="name"
			    					label="姓名"
			    					align="center"
			    					show-overflow-tooltip>
			    				</el-table-column>
			    				<el-table-column
			    					prop="number"
			    					label="账号"
			    					align="center"
			    					show-overflow-tooltip>
			    				</el-table-column>
			    				<el-table-column
			    					prop="sex"
			    					label="性别"
			    					align="center"
			    					show-overflow-tooltip>
			    					<template slot-scope="scope">
			    						<span>{{scope.row.sex == 1 ? '男' : '女'}}</span>
			    					</template>
			    				</el-table-column>
			    				<el-table-column
			    					prop="role_name"
			    					label="角色"
			    					align="center"
			    					show-overflow-tooltip>
			    				</el-table-column>
			    				   <!-- 同学的操作 -->
			    				 <el-table-column
			    				        label="操作"
			    				         width="180px"
			    				         align="center"
			    				        class="detailsTask_lv" >
			    				        <template slot-scope="scope">
				    				           <el-button type="text"  @click="getSpace(scope.row.id)"  >进入主页</el-button>
				    				           <!-- <el-button type="text"   @click="send_message(scope.row)"  v-if="u_id !== $g.user_id" > 私信</el-button> -->
				    				       <el-button type="text"  @click="getOutClass(scope.row.id)"  v-if='$store.getters.userInfo.is_headmaster === 1 && roleBaseid(6)'>退出班级</el-button>
			    				        </template>
			    				</el-table-column>
			    			</el-table>
			    		</template>

			    		<div class="pageBox" v-if="total_number2 > page_size2">
			    			  <el-pagination
			    			      @current-change="change_page2"
			    			      :page-size="page_size2"
			    			      :current-page="page_index2"
			    			      layout="prev, pager, next"
			    			      :total="total_number2">
			    			    </el-pagination>
			    		</div>

			    		<div class="dependent" v-if="placeholder2">
			    			<i class="ipm image_nofound"></i>
			    			<p>还没发现任何相关的内容哦~</p>
			    		</div>
			    	</div>
			    </el-tab-pane>

			    <el-tab-pane label="家长" name="3">
			    	<div class="classMembers_tb">
			    		<template v-if="memberList3.length !== 0">
			    			<el-table
			    			border
			    			:data="memberList3"
			    			style="width: 100%">
			    				<el-table-column
			    					prop="name"
			    					label="姓名"
			    					width=""
			    					align="center"
			    					show-overflow-tooltip>
			    				</el-table-column>
			    				<el-table-column
			    					prop="number"
			    					label="账号"
			    					align="center"
			    					width="">
			    				</el-table-column>
			    				<el-table-column
			    					prop="sex"
			    					label="性别"
			    					align="center"
			    					show-overflow-tooltip>
			    					<template slot-scope="scope">
			    						<span>{{scope.row.sex == 1 ? '男' : '女'}}</span>
			    					</template>
			    				</el-table-column>
			    				<el-table-column
			    					prop="role" v-if="0"
			    					label="孩子">
			    				</el-table-column>
			    				     <!-- 同学的操作 -->
			    				<el-table-column
			    			        label="操作" 
			    			        align="center"
			    			        class="detailsTask_lv"
			    			        width="180px">
			    			        <template slot-scope="scope">
	            				       <el-button type="text"  
	        	    				       @click="getSpace(scope.row.id)"  >
	        		    				   进入主页
	        		    				</el-button>
										<el-button type="text"  v-if="scope.row.id !== $g.user_id "
	        	    				       @click="send_message(scope.row)"  >
	        		    				   私信
	        		    				</el-button>
	        		    				
	        		    			</template>
			    			        <!-- <template slot-scope="scope">
			    			        	<router-link to="###">私信</router-link>
			    			        </template> -->
			    			      </el-table-column>
			    			</el-table>
			    		</template>

			    		<div class="pageBox" v-if="total_number3 > page_size3">
			    			<el-pagination
			    			    @current-change="change_page3"
			    			    :page-size="page_size3"
			    			    :current-page="page_index3"
			    			    layout="prev, pager, next"
			    			    :total="total_number3">
			    			  </el-pagination>
			    		</div>

			    		<div class="dependent" v-if="placeholder3">
			    			<i class="ipm image_nofound"></i>
			    			<p>还没发现任何相关的内容哦~</p>
			    		</div>
			    	</div>
			    </el-tab-pane>

			  </el-tabs>
			</template>
		</div>

		<!-- 退出班级 -->
		<el-dialog
			title="退出班级"
			:visible.sync="signOut"
			width="460px"
			custom-class="alBox"
			:close-on-click-modal="false">
			<div class="signOut">
				<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
					<el-form-item label-width='0' prop="desc" class="">
						<el-input type="textarea" v-model="ruleForm.desc" :rows="8" resize="none"></el-input>
						<span class="numberWord"><i>{{ ruleForm.desc.length }}</i>/200</span>
					</el-form-item>
					<el-form-item class="buttonCSS">
						<el-button @click="resetForm('ruleForm')" type="primary" plain>取消</el-button>
						<el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
					</el-form-item>
				</el-form>
			</div>
			<!--  -->
		</el-dialog>
	</div>
</template>

<script>
	

	export default{
		data(){
			return {
				path: this.$route.query.id,

				memberList: [], //老师
				page_size: this.$g.page_size,
				page_index: 1,
				total_number: 0,
				headmaster: '',/* 班主任*/
				telphone: '',/*班主任电话*/

				memberList2: [], //同学
				page_size2: this.$g.page_size,
				page_index2: 1,
				total_number2: 0,

				memberList3: [], // 家长
				page_size3: this.$g.page_size,
				page_index3: 1,
				total_number3: 0,

				 signOut: false, //退出班级
				 ruleForm: {
				 	desc: ''
				 },
				 rules: {
				 	desc: [
				 		{ required: true, message: '请填写退出理由', trigger: 'blur' },
				 		{ min: 3, max: 200, message: '长度在 3 到 200 个字符', trigger: 'blur' }
				 	]
				 },

				 placeholder: false,
				 placeholder2: false ,
				 placeholder3: false,
				 activeName: '1',
				 u_id: '',

				 selectNav: deep_clone(  this.$router.options.routes[1].children ),
				 classCode:  sessionStorage.getItem('classCode'),
				 classTeacher: sessionStorage.getItem('headmasterid')
			}
		},

		created(){},
		watch: {
	
			'$store.state.changData': {
				handler(val, newval){
					this.path = sessionStorage.getItem('classId')
			
					if( !is_empty( this.path) ) {
						this.loading = true;
						this.getTeacher()
						this.getClassmate()
						this.getParent()
						this.getHeadmaster()
						setInterval(()=>{
							this.classCode = sessionStorage.getItem('classCode')
						});

					}else{
						this.placeholder = true
						this.placeholder2 = true
						this.placeholder3 = true
					}
				},
				immediate: true
			}
		},
		computed: {
			changData() {
				return deep_clone(this.$store.state.changData);
			},
		},
		methods: {

			/* 进入用户的个人主页 */
			getSpace(id){

				let host = sessionStorage.getItem( 'host' )
				let redirectParams = sessionStorage.getItem( 'redirect_params' )
				let link = `${this.BASE_URL}${redirectParams}&host=${host}&routerUrl=space/video&id=${id}`
				window.open(link)
			},
			//获取班主任
			getHeadmaster(){

				let success = (res=>{
					let data = res.data;
					if (data.length === 0) {
						this.headmaster = '未绑定';
						this.telphone = '未绑定'
						this.u_id = 0
						return
					}else{
						this.headmaster = data[0].name;
						this.telphone = data[0].telphone
						this.u_id = data[0].id
					}
					
				});

				let fail = (res=>{return});

				this.$ajax({
					url: 'api/org/class_something',
					method: 'get',
					params: {
						style: 11,
						classid: this.path,
						role_id: 6,
						data_type: 2
					},
					func: {success: success, fail: fail}
				})
			},
			//老师
			getTeacher(){
				let success = (res=>{
					let data = res.data;
					this.memberList = data.data;
					this.total_number = data.data_sum;
					this.page_index = parseInt(data.page_index);
					this.placeholder = this.memberList.length === 0 ? true : false
					
					
				});

				let fail = (res=>{
					return this.placeholder =  true 
				});
				this.$ajax({
					url: 'api/org/class_something',
					method: 'get',
					params: {
						style: 10,
						classid: this.path,
						page: this.page_index,
						size: this.page_size,
						role_id: 6,
						data_type: 2
					},
					func: {
						success: success, fail: fail
					}
				})
			},
			//同学
			getClassmate(){
				let success = (res=>{
					let data = res.data;
					this.memberList2 = data.data;
					this.total_number2 = data.data_sum;
					this.page_index2 = parseInt(data.page_index);
					this.placeholder2 = this.memberList2.length === 0 ? true : false
				});

				let fail = (res=>{
					this.placeholder2 =  true 
					return
				});
				this.$ajax({
					url: 'api/org/class_something',
					method: 'get',
					params: {
						style: 10,
						classid: this.path,
						page: this.page_index2,
						size: this.page_size2,
						role_id: 4,
						data_type: 2
					},
					func: {
						success: success,fail:fail
					}
				})
			},
			//家长
			getParent(){
				let success = (res=>{
					let data = res.data;
					this.memberList3 = data.data;
					this.total_number3 = data.data_sum;
					this.page_index3 = parseInt(data.page_index);

					this.placeholder3 = this.memberList3.length === 0 ? true : false
				});

				let fail = (res=>{
					this.placeholder3 =  true 
					return
				});
				this.$ajax({
					url: 'api/org/class_something',
					method: 'get',
					params: {
						style: 10,
						classid: this.path,
						page: this.page_index3,
						size: this.page_size3,
						role_id: 5,
						data_type: 2
					},
					func: {
						success: success,fail: fail
					}
				})
			},
			send_message(row) {
				this.$store.commit('SET_SEND_USERINFO', {
					send_id : row.id,
					avatar_path : row.avatar_path,
					username:row.name
				});

				this.$router.push({path:"/personal/contact/privateLette"});
			},
			change_page(val){
				this.page_index = val;
				this.getTeacher()
			},
			change_page2(val){
				this.page_index2 = val;
				this.getClassmate()
			},
			change_page3(val){
				this.page_index3 = val;
				this.getParent()
			},
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {

						this.$notify({
							title: '',
							customClass: 'notify_day',
							dangerouslyUseHTMLString: true,
							message: '<div><i class="ipm face"></i>操作成功</div>'
						});
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			//退出班级
			getOutClass(id){
				let success = (res=>{
					this.$message.success(res.msg)
					this.getTeacher()
					this.getClassmate()
					this.$parent.$parent.$parent.$parent.getClassS()
				});
				this.$confirm('是否退出班级?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
					customClass: 'confirm-them',
				}).then(() => {
					this.$ajax({
						url: 'api/org/out_class',
						method: 'delete',
						params: {
							classid: this.path,userid: id
						},
						func: {success: success}
					})
				}).catch(() => {});
			}
		}
	}
</script>